<template>
  <div class='container'>
    <el-card shadow="never">
      <!-- 头部 -->
      <el-form  label-width="80px">
         <el-row>
              <el-col :span="12">
                <el-form-item label="学科名称">
                  <el-input v-model="input" style="width:40%"></el-input>
                   <el-button style="margin-left:10px" size="small" @click="clear">清除</el-button>
                <el-button type="primary" size="small" @click="search">搜索</el-button>
                </el-form-item>
              </el-col>
              <el-col :span="12">
              <div class="btn-box">
              <el-button
              size="small"
              style="margin-right: 10px;"
              type="success"
              icon="el-icon-edit"
               @click="openDialog()"
            >新增学科</el-button>
              </div>
              </el-col>
            </el-row>
      </el-form>
      <!-- 数据总数提示 -->
        <el-alert
        :title="counts"
        type="info"
        show-icon
        :closable="false"
        >
      </el-alert>
      <!-- 表格 -->
       <el-table
       :data="tableData"
       style="width: 100%;margin-top:15px"
        v-loading="listLoading"
       >
        <!-- :index="indexMethod" -->
      <el-table-column type="index" :index="indexMethod"  label="序号" width="50" />
      <el-table-column align="center" label="学科名称">
            <template #default="{row}">
              <span>{{row.subjectName}}</span>
            </template>
      </el-table-column>
      <el-table-column align="center" label="创建者"  >
            <template #default="{row}">
              <span>{{row.username}}</span>
            </template>
      </el-table-column>
      <el-table-column align="center" label="创建日期"  width="160">
            <template #default="{row}">
              <span>{{row.addDate|formetDate}}</span>
            </template>
      </el-table-column>
      <el-table-column align="center" label="前台是否显示">
            <template #default="{row}">
              <span>{{row.isFrontDisplay===1?'是':'否'}}</span>
            </template>
      </el-table-column>
     <el-table-column align="center" label="二级目录">
            <template #default="{row}">
              <span>{{row.twoLevelDirectory}}</span>
            </template>
      </el-table-column>
       <el-table-column align="center" label="标签">
            <template #default="{row}">
              <span>{{row.tags}}</span>
            </template>
      </el-table-column>
      <el-table-column align="center" label="题目数量">
            <template #default="{row}">
              <span>{{row.totals}}</span>
            </template>
      </el-table-column>
      <el-table-column width="240" label="操作">
         <template #default="{row}">
          <div class="subjectsBtn">
         <span @click="toDiretory(row)">学科分类</span>
         <span @click="toTags (row)">学科标签</span>
         <span  @click="openDialog(row)" >修改</span>
         <span  @click="removeSubjects(row)">删除</span>

         </div>
        </template>

      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <div class="pagination">
        <el-pagination
        background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="Number(requestParameters.page)"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="Number(requestParameters.pagesize)"
      layout="prev, pager,  next, sizes,jumper"
      :total="Number(totals)">
    </el-pagination>
    </div>
    <!-- 组件弹出 -->
    <SubjectsAdd
    ref="subjectsadd"
    :data="currSubject"
     @updateList="updateList()"
    ></SubjectsAdd>
    </el-card>

  </div>
</template>

<script>
//  detail
import { list, remove } from '@/api/hmmm/subjects.js'
import SubjectsAdd from '../components/subjects-add.vue'
export default {
  components: { SubjectsAdd },
  data () {
    return {
      listLoading: false,
      input: '',
      requestParameters: {
        page: 1, // 当前页
        pagesize: 10// 每页显示条目个数
      },
      counts: '', // 总条数 用于渲染警告框里的内容
      totals: 0, // 用于处理分页里面的总条数
      tableData: [], // 列表
      currSubject: {}
    }
  },
  created () {
    this.getSubjectsList() // 页面刷新
  },
  methods: {
    // 新增|修改 后更新列表
    updateList () {
      if (!this.currSubject.id) {
        this.requestParameters.page = 1
      }
      this.getSubjectsList()
    },
    // 打开 新增|修改 对话框
    openDialog (subject) {
      this.currSubject = subject || {}
      this.$nextTick(() => {
        this.$refs.subjectsadd.open()
      })
    },
    // 跳转到目录
    toDiretory (row) {
      const { id, subjectName: name } = row
      this.$router.push({ path: 'directorys', query: { id, name } })
    },
    // 跳转到标签
    toTags (row) {
      const { id, subjectName: name } = row
      this.$router.push({ path: 'tags', query: { id, name } })
    },
    // 删除功能
    removeSubjects (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 1、发请求
        // 2、信息提示
        // 3、渲染列表

        await remove(row)
        if (this.tableData.length === 1 && this.requestParameters.page > 1) {
          this.requestParameters.page--
        }
        this.$message.success('成功删除了用户' + '!')
        this.getSubjectsList()
      }).catch(() => {
        console.log('点击')
      })
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      // console.log(`每页 ${val} 条`)
      // 更新每页条数
      this.requestParameters.pagesize = val
      // 重置当前页
      this.requestParameters.page = 1
      // 调用方法, 重新请求
      this.getSubjectsList()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.requestParameters.page = val
      // 调用方法, 重新请求
      this.getSubjectsList()
    },
    indexMethod (index) {
      return (this.requestParameters.page - 1) * this.requestParameters.pagesize + index + 1
    },
    // 重置
    resetForm () {
      this.$refs.requestParameters.resetFields()
    },
    // 页面渲染-封装的接口
    async getSubjectsList () {
      this.listLoading = true
      const { data } = await list(this.requestParameters)
      this.counts = `数据一共 ${data.counts} 条`
      this.totals = data.counts // 用于处理分页里面的总条数
      this.tableData = data.items
      console.log(data)
      console.log(this.tableData, '111111111111')
      // this.page = data.page // 当前页赋值
      // this.pagesize = data.pagesize
      this.listLoading = false
    },
    // 搜索
    search () {
      this.requestParameters.pagesize = 1
      this.getSubjectsList()
    },
    // 清除功能
    clear () {
      this.input = ''
    }
    // 新增用户、修改用户

  }
}
</script>

<style scoped lang='less'>
.btn-box{
  display: flex;
  justify-content: flex-end;
}
.pagination {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
.subjectsBtn{
  display: flex;
  justify-content: space-between;
  padding: 5px;
  color: #409eff;
  font-weight:700;
  cursor: pointer;
}
.subjectsBtn{
  span{
    display: block;
  }
}
::v-deep{
  // .el-card__body{
  //   height:100vh;
  // }
  .el-pagination__jump{
    margin-left: 0px;
  }
  .el-table th{
    background-color: #fafafa;
  }
  .el-table th.is-leaf{
    border-bottom:2px solid #e8e8e8
  }

}
</style>
